<script setup>
import {snackbar} from "./store";
import {ref, onMounted , watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import axios from "axios";

const drawer = ref(true)
const subAPPName = ref(null)
const isShowDrawer = ref(false)
const route = useRoute();
const isShowAppBar = ref(true)

watch(() => route.matched, async newMatched => {
        for (let matchedRoute of newMatched) {
            if (matchedRoute.path === '/login') {
                isShowAppBar.value = false
            }
            if (matchedRoute.path === '/backend') {
                isShowDrawer.value = true
                isShowAppBar.value = true
                subAPPName.value = '管理后台'
                return
            } else if (matchedRoute.path === '/mobile') {
                isShowDrawer.value = false
                isShowAppBar.value = false
                subAPPName.value = '移动端'
                return
            } else if (matchedRoute.path === '/cockpit'){
                isShowDrawer.value = false
                isShowAppBar.value = false
                subAPPName.value = '驾驶舱'
                return
            }
        }
    }
)

onMounted(() => {
    if(route.fullPath == '/login') {
        isShowAppBar.value = false
    }
    if(route.fullPath == '/mobile') {
        isShowAppBar.value = false
    }
})

const user = ref(JSON.parse(localStorage.getItem("ZAYY_USER_INFO")))
// watch(() => route.path, () => {
//     if (localStorage.getItem('token')){
//         axios.get('/users/me').then((res) => {
//             user.value = res.data
//         })
//     } else {
//         user.value = {}
//     }
// })

const router = useRouter();
function logout() {
    localStorage.removeItem('token')
    localStorage.removeItem('ZAYY_USER_INFO')
    router.push('/login')
}
function updateUser(val) {
    user.value = val
}

</script>

<template>
    <v-layout>
        <!-- <v-app-bar v-if="isShowAppBar" density="comfortable" color="background" elevation="0" class="app-bar">
            <template v-slot:default>
                <h2 style="margin-left: 16px;font-size: x-large;color: #0071EB">123</h2>
                <v-btn icon="mdi-menu" v-if="isShowDrawer" @click="drawer = !drawer"></v-btn>       
                <div class="top-title">秀洲区网络安全攻防演练平台</div>
            </template>

            <template v-slot:append>
                <v-menu>
                    <template v-slot:activator="{ props }">
                        <v-btn v-bind="props">
                            <span style="color: #fff;">{{ user ? user.nickName : '' }}</span>
                        </v-btn>
                    </template>

                    <v-list>
                        <v-list-item v-on:click="logout()" title="登出"></v-list-item>
                    </v-list>
                </v-menu>
            </template>
        </v-app-bar> -->
        <router-view :drawer="drawer" @updateUser="updateUser"></router-view>

        <v-snackbar v-model="snackbar.display">{{ snackbar.message }}
            <template v-slot:actions>
                <v-btn :color="snackbar.color" variant="text" @click="snackbar.display = false">关闭</v-btn>
            </template>
        </v-snackbar>
    </v-layout>
</template>

<style scoped>
.top-title {
    text-align: center;
    width: 100%;
    color: #FFFFFF;
    font-size: 29px;
    letter-spacing: 11px;
    font-weight: 500;
    line-height: 29px;
}
.app-bar :deep(.v-toolbar__content) {
    background-image: url(./assets/images/backend.png);
    background-size: 100% 100%;
}
</style>
